<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>推文详情 - 信息展示</title>
    <link rel="icon" type="image/ico" href="pc/ico.png">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f2f5;
            margin: 0;
            padding: 0;
            overflow-y: scroll;
        }

        .header {
            background-color: #007bff;
            color: white;
            padding: 20px;
            text-align: center;
            font-size: 24px;
        }

        .content-container {
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center; /* 居中对齐 */
        }

        .content-title {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .content-meta {
            font-size: 14px;
            color: #888;
            margin-bottom: 20px;
        }

        .content-body {
            font-size: 18px;
            line-height: 1.6;
            color: #333;
            text-align: left; /* 正文内容保持左对齐 */
        }

        /* 小屏幕（手机）适配 */
        @media (max-width: 768px) {
            .header {
                font-size: 20px;
                padding: 15px;
            }

            .content-container {
                margin: 20px;
                padding: 15px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }

            .content-title {
                font-size: 24px;
            }

            .content-meta {
                font-size: 12px;
            }

            .content-body {
                font-size: 16px;
            }
        }

        /* 超小屏幕（窄手机）适配 */
        @media (max-width: 480px) {
            .header {
                font-size: 18px;
                padding: 10px;
            }

            .content-container {
                margin: 15px;
                padding: 10px;
                border-radius: 8px;
            }

            .content-title {
                font-size: 20px;
            }

            .content-meta {
                font-size: 12px;
            }

            .content-body {
                font-size: 14px;
            }
        }

        .content-body img {
            display: block;
            margin: 0 auto;
            max-width: 100%; /* 防止图片超出容器宽度 */
        }
        .content-body {
            font-size: 18px;
            line-height: 1.6;
            color: #333;
            /* 去掉 text-align: center; */
        }
        /* 添加对齐样式，使 Quill 编辑器的对齐生效 */
        .ql-align-center {
            text-align: center;
        }

        .ql-align-right {
            text-align: right;
        }

        .ql-align-left {
            text-align: left;
        }
    </style>
</head>
<body>

<div class="header">
    推文详情
</div>

<div class="content-container" id="contentContainer">
    <!-- 推文内容 -->
    <div id="postTitle" class="content-title">推文标题</div>
    <div id="postMeta" class="content-meta">发布于: <span id="postDate"></span></div>
    <div id="postContent" class="content-body">推文内容加载中...</div>
</div>

<!-- 引入 DOMPurify 和 marked.js 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.0/purify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        // 从 URL 中获取推文 ID
        const urlParams = new URLSearchParams(window.location.search);
        const postId = urlParams.get('id');

        if (postId) {
            // 调用函数来获取推文详情
            fetchPostDetail(postId);
        } else {
            console.error("推文 ID 未找到");
        }
    });

    // 获取推文详情数据
    function fetchPostDetail(postId) {
        const url = `/api/v1/posts/getById/${postId}`;

        fetch(url, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200 && data.data) {
                    renderPostDetail(data.data[0]); // 渲染推文详情
                } else {
                    console.error("获取推文详情失败", data.message);
                }
            })
            .catch(error => console.error("请求推文详情时出错", error));
    }

    function renderPostDetail(post) {
        // 获取页面元素
        const postTitleElement = document.getElementById('postTitle');
        const postMetaElement = document.getElementById('postMeta');
        const postContentElement = document.getElementById('postContent');

        // 赋值数据
        const title = post.title ? post.title : "无标题";
        const createdAt = post.createdAt ? new Date(post.createdAt).toLocaleString() : "无发布日期";
        const authorId = post.userId ? post.userId : "无作者 ID";

        // 获取内容并解析为 HTML
        const markdownContent = post.content ? post.content : "无内容";
        const htmlContent = marked.parse(markdownContent); // 使用 marked 将 Markdown 转换为 HTML
        const cleanContent = DOMPurify.sanitize(htmlContent); // 清理 HTML

        // 更新页面元素内容
        postTitleElement.textContent = title;
        postMetaElement.innerHTML = `发布于: ${createdAt}`;
        postContentElement.innerHTML = cleanContent;
    }

</script>

</body>
</html>
